<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>书签管理器 - 完整视图</title>
  <link rel="stylesheet" href="manager-styles.css">
</head>
<body>
  <div class="manager-container">
    <!-- 左侧标签栏 -->
    <div class="sidebar">
      <div class="sidebar-header">
        <h1>我的书签</h1>
        <div class="add-tag">
          <button id="add-tag-btn">+ 新建标签</button>
        </div>
      </div>
      
      <div class="tags-section">
        <h2>标签</h2>
        <div id="tag-list" class="tag-list">
          <!-- 标签会在这里动态生成 -->
        </div>
      </div>
      
      <div class="sidebar-footer">
        <button id="export-btn">导出书签</button>
        <button id="import-btn">导入书签</button>
        <input type="file" id="import-file" accept=".json" style="display: none;">
      </div>
    </div>
    
    <!-- 右侧内容区域 -->
    <div class="content">
      <!-- 添加书签部分 -->
      <div class="top-bar">
        <h2>书签管理</h2>
        <div class="add-form-container">
          <div class="form-row">
            <div class="form-group">
              <input type="text" id="bookmark-title" placeholder="书签标题">
            </div>
            <div class="form-group">
              <input type="url" id="bookmark-url" placeholder="书签URL">
            </div>
            <div class="form-group">
              <input type="text" id="bookmark-tags" placeholder="标签（用逗号分隔）">
            </div>
            <button id="add-button">添加书签</button>
          </div>
        </div>
      </div>
      
      <!-- 当前选择信息 -->
      <div class="current-selection">
        <h3 id="current-tag-name">所有书签</h3>
        <div class="search-bar">
          <input type="text" id="search-input" placeholder="搜索书签...">
          <button id="search-button">搜索</button>
        </div>
      </div>

      <!-- 批量操作栏 -->
      <div class="batch-actions" style="display: none;">
        <span id="selected-count">已选择 0 个书签</span>
        <button id="batch-delete-btn">批量删除</button>
        <button id="cancel-selection-btn">取消选择</button>
      </div>
      
      <!-- 书签列表 -->
      <div class="bookmarks-area">
        <div class="bookmarks-header">
          <span>书签列表</span>
          <div class="sort-options">
            <select id="sort-select">
              <option value="date-desc">按日期倒序</option>
              <option value="date-asc">按日期正序</option>
              <option value="title-asc">按标题A-Z</option>
              <option value="title-desc">按标题Z-A</option>
            </select>
          </div>
        </div>
        <div id="bookmarks-container" class="bookmarks-grid">
          <!-- 书签会在这里动态生成 -->
        </div>
      </div>
    </div>
  </div>
  
  <!-- 编辑模态框 -->
  <div id="edit-modal" class="modal" style="display: none;">
    <div class="modal-content">
      <div class="modal-header">
        <h3>编辑书签</h3>
        <span class="close-btn">&times;</span>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="edit-title">标题</label>
          <input type="text" id="edit-title">
        </div>
        <div class="form-group">
          <label for="edit-url">URL</label>
          <input type="url" id="edit-url">
        </div>
        <div class="form-group">
          <label for="edit-tags">标签（用逗号分隔）</label>
          <input type="text" id="edit-tags">
        </div>
      </div>
      <div class="modal-footer">
        <button id="save-edit-btn">保存修改</button>
        <button id="cancel-edit-btn">取消</button>
      </div>
    </div>
  </div>
  
  <script src="manager.js"></script>
</body>
</html>